require('../less/coursedirll.less')
require('../fonts/iconfont.css')
// require('weui');
import 'weui'
import weui from 'weui.js';

document.ready(function () {
    //加载导航守卫
    utils.navGuard()

    //获取暂停按键
    const icon_play = document.querySelector('.icon-play');
    // 获取视频标签
    const video = document.querySelector('video');
    //获取遮罩层
    const mask = document.querySelector('.mask');
    //继续训练
    const start = document.querySelector('.start');
    //结束训练
    const end = document.querySelector('.end');
    //课程信息
    const courseTitle = document.querySelectorAll('.courseTitle');
    //课程数量
    const all = document.querySelector('.all');
    //当前
    const now = document.querySelector('.now');
    // 上一个
    const vprev = document.querySelector('.icon-vprev');
    //下一个
    const vnext = document.querySelector('.icon-vnext');
    //进度条
    const progress_bar = document.querySelector('.progress_bar');

    // 获取课程id
    const id = location.search.substr(1).split('=')[1];
    $http.get(`/sports/courseDetail?id=${id}`, function (res) {
        if (res.status === 0) {
            // 在渲染课程数量
            all.textContent = res.data.fragments.length;
            // 将数据存储在本地
            localStorage.setItem('courseInfo', JSON.stringify(res.data.fragments));
        }
    });

    const arr = JSON.parse(localStorage.getItem('courseInfo'));

    // 定义变量保存视频的索引
    let index = 0;
    //定义运动时间变量
    let initial = new Date();
    //定义保存运动时间变量
    let coursearr = [];
    // 播放
    function play(index) {
        video.src = arr[index].videoUrl;
        courseTitle[0].textContent = arr[index].title;
        courseTitle[1].textContent = arr[index].title;
        now.textContent = index + 1
        // video.play()
    }

    video.addEventListener('ended', function () {
        index++;
        if (index >= arr.length) {
            index = 0;
        }
        play(index)
    });

    // 用户点击下一集
    vnext.addEventListener('click', function () {
        ++index;
        if (index >= arr.length) {
            index = 0;
        }
        play(index)
    });
    // 用户点击上一级
    vprev.addEventListener('click', function () {
        --index;
        if (index <= 0) {
            index = 0;
        }
        play(index)
    });
    let w = document.body.clientWidth
    video.addEventListener('play', function () {
        // 重新定义时间初始值
        initial = new Date()
        setInterval(() => {
            progress_bar.style.width = (video.currentTime / video.duration) * w + 'px'
        }, 500);

    })

    // 当暂停点击时
    icon_play.addEventListener('click', function () {
        video.pause();
        mask.style.visibility = 'visible';
        let time = new Date()
        coursearr.push(Math.ceil((time - initial) / 1000 / 60))
        console.log(coursearr);
    });
    //点击继续按钮
    start.addEventListener('click', function () {
        video.play();
        mask.style.visibility = 'hidden';
    });
    //点击结束按钮
    end.addEventListener('click', function () {
        // 定义总时间
        let time = 0;
        coursearr.forEach(function (i) {
            time += i;
        });
        // 上传数据
        const obj = {
            id: id,
            userId: localStorage.getItem('userId'),
            takeTime: time,
            calorie: time * 1.5
        }

        $http.post('/sports/saveTrain', obj, function (res) {
            console.log(res);
            if (res.status === 0) {
                weui.toast('保存成功', {
                    duration: 1000,
                    callback: function () {
                        location.href = './course.html';
                    }
                })

            }
        })


    })



})